<template>
  <div>
    <el-form ref="dataForm" class="form" :model="query" label-position="right" label-width="50px">
      <el-form-item label="状态" prop="csmPhone">
        <el-select v-model="query.auditStatus" clearable placeholder="请选择">
          <el-option label="待审核" :value="1" />
          <el-option label="已审核" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="0" label="" prop="csmPhone">
        <el-button type="primary" class="append-search" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:10}"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />
    <levelSeting ref="levelSeting" />
    <lookHistory ref="lookHistory" />
  </div>
</template>
<script>
  import { customerLevelEquityList, queryCustomerLevelAuditEquities } from '@/api'
  import { parseTime } from '@/utils'
  export default {
    name: 'gradeSetting',
    components: {
      levelSeting: require('./levelSetting.vue').default,
      lookHistory: require('./lookHistory.vue').default
    },
    data() {
      return {
        customerLevelEquityAuditStatus: [{ 'value': 1, 'desc': '未审核', 'key': 'UNREVIEWED' }, { 'value': 2, 'desc': '已审核', 'key': 'VALID' }],
        query: {
          keyStatus: '2'
        },
        tableData: {
          total: 0,
          column: [
            { label: '等级', prop: 'levelName', width: 100, align: 'center' },
            { label: '状态', prop: 'auditStatus', width: 120, align: 'center', formatter: this.auditMap },

            { label: '最后修改人', prop: 'modifyUser', width: 100, align: 'center' },
            { label: '最后修改时间', prop: 'modifyTime', width: 250, align: 'center',
              render: (h, { row }) => <span>{ row.modifyTime && parseTime(row.modifyTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            { label: '审核人', prop: 'auditor', width: '', align: 'center' },
            { label: '审核时间', prop: 'auditDt', width: 250, align: 'center',
              render: (h, { row }) => <span>{ row.auditDt && parseTime(row.auditDt, '{y}-{m}-{d} {h}:{i}:{s}') }</span> },
            {
              label: '操作',
              align: 'center',
              fixed: 'right',
              width: '240',
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-link size='mini' onClick={() => this.audit(row, $index)}>
                      {row.auditStatus !== 2 ? '审核' : ''}
                    </el-link>
                    <el-link size='mini' onClick={() => this.update(row, $index)}>
                      编辑
                    </el-link>
                    <el-link size='mini' onClick={() => this.lookDetail(row, $index)}>
                      详情
                    </el-link>
                    <el-link size='mini' onClick={() => this.lastRecord(row)}>
                      上次调整记录
                    </el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    created() {
    },
    methods: {
      search() {
        this.fetchData({})
      },
      lastRecord(row) {
        // this.$refs.levelSeting.open({ ...row, type: 'last' })
        this.$refs.lookHistory.open({ ...row, type: 'last' })
      },
      update(row) {
        this.$refs.levelSeting.type = 'edit'
        this.$refs.levelSeting.open({ ...row, type: 'edit' })
      },
      async audit(row) {
        try {
          console.log(row)
          const res = await queryCustomerLevelAuditEquities({ levelNum: row.levelNum })
          if (res.success) {
            this.fetchData({})
          }
        } catch (e) {
          console.log(e)
        }
      },
      lookDetail(row) {
        this.$refs.lookHistory.open({ ...row, type: 'detail' })
      },
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const query = {
          ...this.query,
          currentPage,
          pageSize
        }
        const res = await customerLevelEquityList(query)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      auditMap: function(row, column) {
        const val = row['auditStatus']
        if (!val) { // 默认待审核
          const valueMap = this.customerLevelEquityAuditStatus.find(l => l.value === val)
          return valueMap.desc || '未审核'
        }
        const valueMap = this.customerLevelEquityAuditStatus.find(l => l.value === val)
        return valueMap.desc
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
.info-title {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
  .title-icon {
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 6px;
    background: $themeColor;
  }
  span {
    font-weight: 700;
    color: $themeColor;
  }
}
</style>
